<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<style>
    .detail-header {
        margin-bottom: 30px;
    }
    
    .detail-title {
        font-size: 28px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 8px;
    }
    
    .detail-subtitle {
        color: #666;
        font-size: 16px;
    }
    
    .detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-bottom: 30px;
    }
    
    .detail-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        padding: 24px;
        border: 1px solid #e5e5e5;
    }
    
    .card-title {
        font-size: 18px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .info-item:last-child {
        border-bottom: none;
    }
    
    .info-label {
        color: #666;
        font-weight: 500;
        font-size: 14px;
    }
    
    .info-value {
        color: #1a1a1a;
        font-weight: 600;
        font-size: 14px;
    }
    
    .visibility-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .visibility-public {
        background: #e8f5e8;
        color: #2e7d32;
    }
    
    .visibility-private {
        background: #ffebee;
        color: #c62828;
    }
    
    .members-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 16px;
    }
    
    .members-table th {
        background: #f8f8f8;
        padding: 12px;
        text-align: left;
        font-weight: 600;
        color: #1a1a1a;
        font-size: 14px;
        border-bottom: 2px solid #e5e5e5;
    }
    
    .members-table td {
        padding: 12px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 14px;
        color: #1a1a1a;
    }
    
    .members-table tr:hover {
        background: #f8f8f8;
    }
    
    .permission-badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .permission-edit {
        background: #e3f2fd;
        color: #1565c0;
    }
    
    .permission-view {
        background: #f3e5f5;
        color: #7b1fa2;
    }
    
    .action-buttons {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    
    .btn {
        padding: 6px 12px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    
    .btn-primary {
        background: #1a1a1a;
        color: white;
    }
    
    .btn-primary:hover {
        background: #333;
    }
    
    .btn-danger {
        background: #d32f2f;
        color: white;
    }
    
    .btn-danger:hover {
        background: #b71c1c;
    }
    
    .invite-form {
        background: #f8f8f8;
        padding: 20px;
        border-radius: 8px;
        margin-top: 16px;
    }
    
    .invite-form .form-group {
        margin-bottom: 16px;
    }
    
    .invite-form label {
        display: block;
        margin-bottom: 6px;
        color: #1a1a1a;
        font-weight: 600;
        font-size: 14px;
    }
    
    .invite-form input,
    .invite-form select {
        width: 100%;
        padding: 8px 12px;
        border: 2px solid #e5e5e5;
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.3s ease;
        background: white;
    }
    
    .invite-form input:focus,
    .invite-form select:focus {
        outline: none;
        border-color: #333;
    }
    
    .back-btn {
        background: white;
        color: #1a1a1a;
        border: 2px solid #e5e5e5;
        padding: 10px 20px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
    }
    
    .back-btn:hover {
        background: #f5f5f5;
        border-color: #333;
        transform: translateY(-1px);
    }
    
    .empty-members {
        text-align: center;
        padding: 40px 20px;
        color: #666;
    }
    
    .empty-members-icon {
        font-size: 32px;
        margin-bottom: 12px;
        opacity: 0.5;
    }
</style>

<div class="detail-header">
    <div class="detail-title">空间详情</div>
    <div class="detail-subtitle">${space.name} - 空间信息与成员管理</div>
</div>

<div class="detail-grid">
    <div class="detail-card">
        <div class="card-title">
            <span>📋</span>
            基本信息
        </div>
        <div class="info-item">
            <span class="info-label">空间名称</span>
            <span class="info-value">${space.name}</span>
        </div>
        <div class="info-item">
            <span class="info-label">空间描述</span>
            <span class="info-value">${space.description}</span>
        </div>
        <div class="info-item">
            <span class="info-label">可见性</span>
            <span class="visibility-badge ${space.visibility == 'public' ? 'visibility-public' : 'visibility-private'}">
                ${space.visibility == 'public' ? '公开' : '私有'}
            </span>
        </div>
        <div class="info-item">
            <span class="info-label">所有者</span>
            <span class="info-value">${space.ownerName}</span>
        </div>
        <div class="info-item">
            <span class="info-label">创建时间</span>
            <span class="info-value">${fn:substring(space.createdAt, 0, 19)}</span>
        </div>
    </div>
    
    <div class="detail-card">
        <div class="card-title">
            <span>👥</span>
            成员管理
        </div>
        <c:if test="${isOwner}">
            <div class="invite-form">
                <form action="/space/invite/${space.id}" method="post">
                    <div class="form-group">
                        <label for="userId">用户ID</label>
                        <input type="number" id="userId" name="userId" required placeholder="请输入用户ID">
                    </div>
                    <div class="form-group">
                        <label for="permission">权限</label>
                        <select id="permission" name="permission">
                            <option value="EDIT">编辑权限</option>
                            <option value="VIEW">只读权限</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <span>➕</span>
                        邀请成员
                    </button>
                </form>
            </div>
        </c:if>
    </div>
</div>

<div class="detail-card">
    <div class="card-title">
        <span>👥</span>
        成员列表
    </div>
    
    <c:if test="${not empty members}">
        <table class="members-table">
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>权限</th>
                    <th>加入时间</th>
                    <c:if test="${isOwner}"><th>操作</th></c:if>
                </tr>
            </thead>
            <tbody>
                <c:forEach var="member" items="${members}">
                    <tr>
                        <td>${member.username}</td>
                        <td>${member.email}</td>
                        <td>
                            <span class="permission-badge ${member.permission == 'EDIT' ? 'permission-edit' : 'permission-view'}">
                                ${member.permission == 'EDIT' ? '编辑' : '只读'}
                            </span>
                        </td>
                        <td>${fn:substring(member.addedAt, 0, 19)}</td>
                        <c:if test="${isOwner}">
                            <td>
                                <div class="action-buttons">
                                    <form action="/space/removeMember/${space.id}" method="post" style="display:inline;">
                                        <input type="hidden" name="memberId" value="${member.userId}">
                                        <button type="submit" class="btn btn-danger" onclick="return confirm('确定移除该成员？')">
                                            <span>❌</span>
                                            移除
                                        </button>
                                    </form>
                                    <form action="/space/updatePermission/${space.id}" method="post" style="display:inline;">
                                        <input type="hidden" name="memberId" value="${member.userId}">
                                        <select name="permission" style="margin-right: 8px; padding: 4px 8px; border-radius: 4px; border: 1px solid #e5e5e5;">
                                            <option value="EDIT" ${member.permission == 'EDIT' ? 'selected' : ''}>编辑</option>
                                            <option value="VIEW" ${member.permission == 'VIEW' ? 'selected' : ''}>只读</option>
                                        </select>
                                        <button type="submit" class="btn btn-primary">
                                            <span>✏️</span>
                                            修改权限
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </c:if>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </c:if>
    
    <c:if test="${empty members}">
        <div class="empty-members">
            <div class="empty-members-icon">👥</div>
            <div>暂无成员</div>
            <div style="font-size: 12px; margin-top: 4px;">邀请用户加入空间开始协作</div>
        </div>
    </c:if>
</div>

<!-- 文档列表区域 -->
<div style="margin-top:40px;">
    <h3>文档列表</h3>
    <a href="/document/create?spaceId=${space.id}" style="background: #1a1a1a; color: white; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-weight: 500;">✏️ 新建文档</a>
    <table style="width:100%;margin-top:16px;">
        <thead>
            <tr>
                <th>标题</th>
                <th>作者</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        <c:forEach var="doc" items="${docs}">
            <tr>
                <td>${doc.title}</td>
                <td>${doc.authorName}</td>
                <td>
                    <c:choose>
                        <c:when test="${not empty doc.createdAt}">
                            ${fn:substring(doc.createdAt, 0, 19)}
                        </c:when>
                        <c:otherwise>-</c:otherwise>
                    </c:choose>
                </td>
                <td>
                    <a href="/document/detail/${doc.id}">查看</a>
                    | <a href="/document/edit/${doc.id}">编辑</a>
                    <form action="/document/delete/${doc.id}" method="post" style="display:inline;">
                        <button type="submit" onclick="return confirm('确定删除该文档？')">删除</button>
                    </form>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <c:if test="${empty docs}">
        <p style="color:#888;">该空间暂无文档。</p>
    </c:if>
</div>

<a href="/space/public" class="back-btn">
    <span>←</span>
    返回空间列表
</a> 